{% extends "base.html" %}

{% block navbar %}{% endblock %}

{% block content %}
<div class="fixed inset-0 bg-black z-20 animate-fade-out"></div>

<div class="fixed inset-0 z-0">
  <div class="absolute inset-0 bg-custom animate-gradient"></div>
  <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-white/10 rounded-full blur-3xl animate-float"></div>
  <div class="absolute bottom-1/3 right-1/3 w-80 h-80 bg-blue-400/20 rounded-full blur-3xl animate-float-delay"></div>
</div>

<!-- 表单容器：登录/注册动态切换 -->
<div class="relative z-10 max-w-sm mx-auto my-16 p-6 space-y-4">
  <!-- 标题（动态切换） -->
  <h2 class="text-2xl font-bold text-center text-white" id="form-title">
    <i class="fa fa-lock mr-2"></i>
    <span id="title-text">登录</span>
  </h2>

  <!-- 提示信息（动态切换） -->
  <div id="message-wrapper">
    {% if login_error %}
      <p class="text-center text-red-300 text-sm" id="login-error">{{ login_error }}</p>
    {% else %}
      <p class="text-center text-white/80 text-sm" id="login-hint">欢迎回来，登录后继续挑战更多问题</p>
    {% endif %}
    <p class="text-center text-white/80 text-sm hidden" id="register-hint">创建新账号，开启编程之旅</p>
  </div>

  <!-- 登录表单（默认显示） -->
  <form method="POST" action="{{ url_for('login') }}" class="form-panel" id="login-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    <div class="mb-4">
      <label class="block text-sm font-medium text-white/90 mb-1">用户名</label>
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-white/70">
          <i class="fa fa-user"></i>
        </span>
        <input type="text" name="username" placeholder="请输入用户名" 
               class="w-full pl-10 px-3 py-2 border border-white/30 bg-white/10 rounded-md text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
      </div>
    </div>
    
    <div class="mb-6">
      <label class="block text-sm font-medium text-white/90 mb-1">密码</label>
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-white/70">
          <i class="fa fa-key"></i>
        </span>
        <input type="password" name="password" placeholder="请输入密码" 
               class="w-full pl-10 px-3 py-2 border border-white/30 bg-white/10 rounded-md text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
      </div>
    </div>
    
    <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600/90 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all transform hover:scale-[1.02] active:scale-[0.98]">
      登录
    </button>
  </form>

  <!-- 注册表单（默认隐藏） -->
  <form method="POST" action="{{ url_for('register') }}" class="form-panel hidden" id="register-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    <div class="mb-4">
      <label class="block text-sm font-medium text-white/90 mb-1">用户名</label>
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-white/70">
          <i class="fa fa-user"></i>
        </span>
        <input type="text" name="username" placeholder="请输入用户名" 
               class="w-full pl-10 px-3 py-2 border border-white/30 bg-white/10 rounded-md text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
      </div>
    </div>
    
    <div class="mb-4">
      <label class="block text-sm font-medium text-white/90 mb-1">密码</label>
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-white/70">
          <i class="fa fa-key"></i>
        </span>
        <input type="password" name="password" placeholder="请输入密码" 
               class="w-full pl-10 px-3 py-2 border border-white/30 bg-white/10 rounded-md text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
      </div>
    </div>
    
    <div class="mb-6">
      <label class="block text-sm font-medium text-white/90 mb-1">确认密码</label>
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-white/70">
          <i class="fa fa-lock"></i>
        </span>
        <input type="password" name="confirm_password" placeholder="请确认密码" 
               class="w-full pl-10 px-3 py-2 border border-white/30 bg-white/10 rounded-md text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
      </div>
    </div>
    
    <button type="submit" class="w-full px-4 py-2 text-white bg-green-600/90 rounded-md hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-300 transition-all transform hover:scale-[1.02] active:scale-[0.98]">
      注册
    </button>
  </form>

  <!-- 切换按钮（动态显示） -->
  <div class="text-center" id="toggle-wrapper">
    <p class="text-white/80 text-sm" id="login-toggle">
      还没有账号？ 
      <span class="text-blue-200 hover:text-white hover:underline cursor-pointer" onclick="toggleForm('register')">立即注册</span>
    </p>
    <p class="text-white/80 text-sm hidden" id="register-toggle">
      已有账号？ 
      <span class="text-blue-200 hover:text-white hover:underline cursor-pointer" onclick="toggleForm('login')">立即登录</span>
    </p>
  </div>

  <!-- 其他登录方式（保留） -->
  <div class="text-center">
    <div class="relative flex items-center justify-center">
      <div class="h-px bg-white/30 w-1/3"></div>
      <span class="px-3 text-white/60 text-xs">其他登录方式</span>
      <div class="h-px bg-white/30 w-1/3"></div>
    </div>
    <a href="{{ url_for('guest_login') }}" class="inline-flex items-center mt-4 text-white/80 hover:text-white text-sm transition-colors">
      <i class="fa fa-user-o mr-1"></i> 以游客身份登录
    </a>
  </div>
</div>

<style>
/* 基础隐藏类 */
.hidden { display: none; }

/* 背景动画（复用 home 逻辑） */
@keyframes fadeOut {
  0% { opacity: 1; z-index: 20; }  
  80% { opacity: 0.2; z-index: 20; }  
  100% { opacity: 0; z-index: -1; }  
}
.animate-fade-out { animation: fadeOut 2s ease-out forwards; }

.bg-custom {
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)), 
    url("/static/images/bg-login.jpg") center/cover no-repeat; 
  background-size: 400% 400%, cover; 
  animation: black-fade 15s infinite alternate; 
}
@keyframes black-fade {
  0% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* 表单面板动画 */
.form-panel {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 原有动画保留 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delay { animation: float 8s ease-in-out 2s infinite; }

@media (max-width: 640px) {
  .max-w-sm { width: 90%; margin: 4rem auto; }
}
</style>

<script>
/**
 * 表单切换逻辑：
 * - 切换登录/注册表单的显示状态
 * - 同步切换标题、提示语、切换按钮
 */
function toggleForm(target) {
  const loginForm = document.getElementById('login-form');
  const registerForm = document.getElementById('register-form');
  const loginToggle = document.getElementById('login-toggle');
  const registerToggle = document.getElementById('register-toggle');
  const titleText = document.getElementById('title-text');
  const loginHint = document.getElementById('login-hint');
  const registerHint = document.getElementById('register-hint');
  const loginError = document.getElementById('login-error');

  if (target === 'register') {
    // 切换到注册表单
    loginForm.classList.add('hidden');
    registerForm.classList.remove('hidden');
    loginToggle.classList.add('hidden');
    registerToggle.classList.remove('hidden');
    titleText.textContent = '注册';
    
    // 隐藏登录提示/错误，显示注册提示
    if (loginHint) loginHint.classList.add('hidden');
    if (loginError) loginError.classList.add('hidden');
    registerHint.classList.remove('hidden');
  } else {
    // 切换到登录表单
    registerForm.classList.add('hidden');
    loginForm.classList.remove('hidden');
    registerToggle.classList.add('hidden');
    loginToggle.classList.remove('hidden');
    titleText.textContent = '登录';
    
    // 隐藏注册提示，恢复登录提示/错误
    registerHint.classList.add('hidden');
    if (loginHint) loginHint.classList.remove('hidden');
    if (loginError) loginError.classList.remove('hidden');
  }
}
</script>
{% endblock %}